<template>
  <view class="container">
    <!-- 头部 -->
    <view class="header-box">
      <image class="header-bg" src="../../static/images/device/device_bg.png" mode=""></image>
      <view class="header-title">
        <!-- 返回按钮 -->
        <view class="back-btn" @click="goBack()">
          <uni-icons color="#262D37" type="left"></uni-icons>
        </view>
        <view class="header-title-text">设备详情</view>
      </view>
      <!-- 头部信息 状态、ID -->
      <view class="header-info">
        <view class="info-name">{{ deviceInfo.name }}</view>
        <view class="info-status" :style="{ color: deviceInfo.upOrDown == 1 ? '#00BD70' : '#F2990D' }">
          <view class="status-circle" :style="{ backgroundColor: deviceInfo.upOrDown == 1 ? '#00BD70' : '#F2990D' }"></view>
          {{ deviceInfo.upOrDown == 1 ? '运行中' : '停用' }}
        </view>
        <view class="info-row">
          <view class="row-label">设备ID：</view>
          <view class="row-value">{{ deviceInfo.id }}</view>
        </view>
        <view class="info-row">
          <view class="row-label">模型ID：</view>
          <view class="row-value">{{ deviceInfo.deviceModelId }}</view>
        </view>
        <view class="info-location">
          <image class="location-icon" src="../../static/images/device/location.png" mode=""></image>
          <view class="location-text">
            {{ deviceInfo.location }}
          </view>
        </view>
      </view>
    </view>
    <!-- 内容区 -->
    <view class="content-box">
      <!-- navbar -->
      <view class="navbar-box">
        <view
          :class="['navbar-item', activeNavbarIndex == index ? 'active-navbar-item' : '']"
          v-for="(item, index) in navbarList"
          :key="item.type"
          @click="changeNavbar(index)"
          >{{ item.name }}</view
        >
      </view>
      <view class="nabvar-content">
        <!-- 设备概况 -->
        <device-overview v-show="activeNavbarIndex == 0" :deviceInfo="deviceInfo"></device-overview>
        <!-- 端口详情 -->
        <port-detail v-show="activeNavbarIndex == 1" :deviceInfo="deviceInfo"></port-detail>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { onMounted, reactive, toRefs } from 'vue'
  import { getDeviceImu, getDeviceSwitch, getDeviceDistributionFrame, getDeviceAp } from '@/service/device.js'

  const state = reactive({
    id: '',
    deviceType: '',
    deviceInfo: {},
    navbarList: [
      {
        name: '设备概况',
        type: 1
      },
      {
        name: '端口详情',
        type: 2
      }
    ],
    activeNavbarIndex: 0
  })
  const { deviceInfo, navbarList, activeNavbarIndex } = toRefs(state)

  onLoad((options) => {
    state.id = options.id
    state.deviceType = options.deviceType
	state.activeNavbarIndex = options.activeNavbarIndex?options.activeNavbarIndex*1:0
    getDetail(state.id)
  })

  //返回
  const goBack = () => {
    uni.navigateBack()
  }

  //获取详情
  const getDetail = (id) => {
    let Func = null
    switch (state.deviceType) {
      case '1':
        Func = getDeviceImu
        break
      case '2':
        Func = getDeviceSwitch
        break
      case '3':
        Func = getDeviceDistributionFrame
        break
      case '5':
        Func = getDeviceAp
        break
    }
    if (Func) {
      Func(id).then((res) => {
        state.deviceInfo = res.data
        state.deviceInfo.location = Array.isArray(state.deviceInfo.locationList) ? handleLocation(state.deviceInfo) : ''
      })
    }
  }

  //处理位置信息
  const handleLocation = (row) => {
    let location = row.locationList.map((item) => item.name)
    location.push(row.rackName)
    if (Array.isArray(row.unoIndexList) && row.unoIndexList.length) {
      if (row.unoIndexList.length > 1) {
        location.push(`${row.unoIndexList[0]}-${row.unoIndexList[row.unoIndexList.length - 1]}U`)
      } else {
        location.push(`${row.unoIndexList[0]}U`)
      }
    }
    return location.join('/')
  }

  //切换navbar
  const changeNavbar = (index) => {
    state.activeNavbarIndex = index
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100vh;
    position: relative;
    .header-box {
      box-sizing: border-box;
      width: 100%;
      height: 459rpx;
      padding: 50rpx 20rpx 0;
      background: linear-gradient(180deg, rgba(209, 235, 255, 0) 0%, #bed3fe 100%);
      position: relative;
      .header-bg {
        display: block;
        width: 241rpx;
        height: 178rpx;
        position: absolute;
        top: 144rpx;
        right: 28rpx;
      }
      .header-title {
        width: 100%;
        display: flex;
        align-items: center;
        .back-btn {
          margin-right: 14rpx;
          :deep(.uni-icons) {
            font-size: 32rpx !important;
            color: #262d37;
            line-height: 32rpx;
          }
        }
        .header-title-text {
          font-weight: bold;
          font-size: 32rpx;
          color: #262d37;
        }
      }
      .header-info {
        box-sizing: border-box;
        padding: 0 34rpx;
        margin-top: 42rpx;
        .info-name {
          width: 100%;
          font-size: 41rpx;
          font-weight: bold;
          color: #262d37;
          line-height: 65rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .info-status {
          font-size: 23rpx;
          line-height: 38rpx;
          display: flex;
          align-items: center;
          margin-bottom: 10rpx;
          .status-circle {
            width: 12rpx;
            height: 12rpx;
            border-radius: 50%;
            margin-right: 10rpx;
          }
        }
        .info-row {
          display: flex;
          align-items: center;
          line-height: 34rpx;
          .row-label {
            width: 100rpx;
            font-size: 23rpx;
            color: #7e8ca0;
          }
          .row-value {
            font-size: 23rpx;
            color: #262d37;
          }
        }
        .info-location {
          width: 100%;
          display: flex;
          align-items: center;
          margin-top: 10rpx;
          .location-icon {
            display: inline-block;
            width: 11rpx;
            height: 23rpx;
            margin-right: 10rpx;
            margin-top: 4rpx;
          }
          .location-text {
            width: calc(100% - 16rpx);
            font-size: 23rpx;
            color: #262d37;
            line-height: 30rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
    .content-box {
      box-sizing: border-box;
      width: 100%;
      height: calc(100% - 391rpx);
      padding: 15rpx 30rpx;
      border-radius: 16rpx;
      background-color: #fff;
      margin-top: -68rpx;
      overflow-y: auto;
      position: relative;
      .navbar-box {
        width: 100%;
        height: 60rpx;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 15rpx;
        .navbar-item {
          width: 210rpx;
          height: 45rpx;
          font-size: 28rpx;
          color: #262d37;
          text-align: center;
          line-height: 45rpx;
          position: relative;
        }
        .active-navbar-item {
          color: #295bf5;
          font-weight: bold;
          &::after {
            content: '';
            display: block;
            width: 92rpx;
            height: 5rpx;
            background: #295bf5;
            transform: skew(-30deg) translateX(-50%);
            position: absolute;
            left: 50%;
            bottom: -10rpx;
          }
        }
      }
      .nabvar-content {
        width: 100%;
        height: calc(100% - 75rpx);
        overflow-y: auto;
      }
    }
  }
</style>
